
import React, { Component } from 'react';
import {
    StyleSheet,
    Text,
    View
} from 'react-native';
import NavigationBar from 'react-native-navbar';
import Theme from '../config/Theme';
import ImageButton from '../component/ImageButtonWithText';
import Icon from 'react-native-vector-icons/Ionicons';


export default class UserInfo extends Component {


    render() {
        const titleConfig = {
            title: '个人资料',
            tintColor: 'white'
        };
        return (
            <View style={styles.container}>
                <NavigationBar style={{ backgroundColor: Theme.actionBar.backgroundColor}}
                    title={titleConfig}
                    leftButton={<ImageButton
                        color="white"
                        icon="ios-arrow-round-back"
                        imgSize={40}
                        onPress={() => {
                            this.props.closePage()
                        }}
                        btnStyle={{width:50}}
                    />} />
                <View style={{ flexDirection: 'row', backgroundColor: 'white', borderBottomWidth: 0.5, borderBottomColor: 'gainsboro', justifyContent: 'space-between', alignItems: 'center', padding: 10, marginTop: 15 }}>
                    <Text>头像</Text>
                    <View style={{ flexDirection: 'row', alignItems: 'center' }}>
                        <Icon name="ios-person" size={30} color="gray" style={{ marginRight: 15, backgroundColor: 'gainsboro', paddingLeft: 5, paddingRight: 5 }} />
                        <Icon name="ios-arrow-forward" size={30} color="gray" />
                    </View>
                </View>
                <View style={{ flexDirection: 'row', backgroundColor: 'white', borderBottomWidth: 0.5, borderBottomColor: 'gainsboro', justifyContent: 'space-between', alignItems: 'center', padding: 10 }}>
                    <Text>昵称</Text>
                    <View style={{ flexDirection: 'row', alignItems: 'center' }}>
                        <Text style={{ marginRight: 15 }}>134****5861</Text>
                        <Icon name="ios-arrow-forward" size={30} color="gray" />
                    </View>
                </View>
                <View style={{ flexDirection: 'row', backgroundColor: 'white', borderBottomWidth: 0.5, borderBottomColor: 'gainsboro', justifyContent: 'space-between', alignItems: 'center', padding: 10 }}>
                    <Text>性别</Text>
                    <View style={{ flexDirection: 'row', alignItems: 'center' }}>
                        <Text style={{ marginRight: 15 }}>未设置</Text>
                        <Icon name="ios-arrow-forward" size={30} color="gray" />
                    </View>
                </View>
                <View style={{ flexDirection: 'row', backgroundColor: 'white', borderBottomWidth: 0.5, borderBottomColor: 'gainsboro', justifyContent: 'space-between', alignItems: 'center', padding: 10 }}>
                    <Text>生日</Text>
                    <View style={{ flexDirection: 'row', alignItems: 'center' }}>
                        <Text style={{ marginRight: 15 }}>未设置</Text>
                        <Icon name="ios-arrow-forward" size={30} color="gray" />
                    </View>
                </View>
                <View style={{ flexDirection: 'row', backgroundColor: 'white', borderBottomWidth: 0.5, borderBottomColor: 'gainsboro', justifyContent: 'space-between', alignItems: 'center', padding: 10, marginTop: 15 }}>
                    <Text>手机号</Text>
                    <View style={{ flexDirection: 'row', alignItems: 'center' }}>
                        <Text style={{ marginRight: 15 }}>13405755861</Text>
                        <Icon name="ios-arrow-forward" size={30} color="gray" />
                    </View>
                </View>
                <View style={{ flexDirection: 'row', backgroundColor: 'white', borderBottomWidth: 0.5, borderBottomColor: 'gray', justifyContent: 'space-between', alignItems: 'center', padding: 10 }}>
                    <Text>我的二维码</Text>
                    <View style={{ flexDirection: 'row', alignItems: 'center' }}>
                        <Icon name="md-barcode" size={30} color="gray" style={{ marginRight: 15 }} />
                        <Icon name="ios-arrow-forward" size={30} color="gray" />
                    </View>
                </View>
            </View>
        );
    }
}

const styles = StyleSheet.create({
    container: {
        flex: 1,
        backgroundColor: 'gainsboro',
    },
});

